/*
 * @Author: GuitarXiaohe && 2205227953@qq.com
 * @Date: 2024-01-15 15:54:46
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-02-21 17:20:44
 * @FilePath: /umi/src/pages/login/LoginForm.jsx
 * @Description:
 * QQ:2205227953,邮箱:2205227953@qq.com
 * Copyright (c) 2024 by GuitarXiaohe, All Rights Reserved.
 */
import { Button, Form, Input } from "antd";
import { login, getCodeImg } from "@/api/login";
import React, { useState, useEffect } from "react";
import { setToken } from "@/utils/auth";
import { connect, useDispatch, history } from "umi";
const LoginFormPage = (props) => {
  // 全局状态
  const { user, dispatch } = props;

  // getUserInfo
  const [codeUrl, setCodeUrl] = useState("");

  // uuid
  const [uuid, setUuid] = useState("");

  // 登录加载
  const [loading, setLoading] = useState(false);

  // 获取验证码
  const getCode = () => {
    getCodeImg().then((res) => {
      setCodeUrl("data:image/gif;base64," + res.img);
      setUuid(res.uuid);
    });
  };
  // 登录
  const onFinish = async (values) => {
    try {
      setLoading(true);
      const result = await login({ ...values, uuid });
      setToken(result.token);

      window.location.href = "/index";
      // history.push("/index");
    } catch (err) {
      getCode();
    } finally {
      setLoading(false);
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  useEffect(() => {
    getCode();
  }, []);

  return (
    <div className="formClass">
      <Form
        className="loginForm"
        name="basic"
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}
        initialValues={{
          remember: true,
          username: "admin",
          password: "admin123",
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="手机号"
          name="username"
          rules={[
            {
              required: true,
              message: "请输入手机号!",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码!",
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item label="验证码">
          <Form.Item
            label=""
            name="code"
            rules={[
              {
                required: true,
                message: "请输入验证码!",
              },
            ]}
            style={{ display: "inline-block", width: "calc(80% - 15px)" }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            style={{
              display: "inline-block",
              width: "calc(20% - 8px)",
              marginLeft: "10px",
            }}
          >
            <img className="imgClass" src={codeUrl} onClick={getCode} />
          </Form.Item>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" loading={loading}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

// export default connect((state: Record<string, any>) => ({ user: state.user }))(PageWrapper);

export default connect((state) => ({ user: state.user }))(LoginFormPage);
